<template>
  <div id="communityList" class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>加盟商管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的加盟商</el-breadcrumb-item>
            <el-breadcrumb-item>加盟商列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span">名称：</span>
              <el-input size="medium" v-model="account_name" placeholder="请输入加盟商名称" style="width: 160px;"></el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">电话：</span>
              <el-input size="medium" maxlength="11" v-model="phone" placeholder="请输入电话" style="width: 160px;"></el-input>
            </div>

            <div class="same-left-one">
              <span class="same-search-span">账号：</span>
              <el-input size="medium" v-model="account" placeholder="请输入加盟商账号" style="width: 160px;"></el-input>
            </div>
            <el-button type="primary" size="medium" @click="search()">搜索</el-button>
            <el-button type="info" size="medium" @click="reset()">重置</el-button>
          </div>
          <div class="same-search-right"></div>
        </div>
      </div>
    </div>
    <div class="same-table-box">
      <div class="tabel_header">
        <h4 class="same-title-box">
          我的加盟商
        </h4>
        <div class="same-left-one">
          <el-button type="primary" size="mini" @click="addFranchisee" icon="el-icon-circle-plus">添加</el-button>
        </div>
      </div>

      <div class="table_box">


        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
            :data="tableData" stripe>
            <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
            <el-table-column align="center" prop="account_name" label="名称">
            </el-table-column>

            <el-table-column align="center" prop="account" label="账号">
            </el-table-column>

            <el-table-column align="center" prop="devnumber" label="设备数">
            </el-table-column>

            <el-table-column align="center" label="提现账户余额">
              <template slot-scope="scope">
                {{scope.row.account_balance|filterNumber}}
              </template>
            </el-table-column>

            <el-table-column align="center" label="充值账户余额">
              <template slot-scope="scope">
                {{scope.row.account_recharge_balance|filterNumber}}
              </template>
            </el-table-column>

            <el-table-column align="center" label="特殊卡账户余额">
              <template slot-scope="scope">
                {{scope.row.special_recharge_balance|filterNumber}}
              </template>
            </el-table-column>

            <el-table-column align="center" prop="id" label="状态">
              <template slot-scope="scope">
                <el-tag size="mini" type="success" v-if="scope.row.account_status == 1">正常</el-tag>
                <el-tag size="mini" type="warning" v-else>冻结</el-tag>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="create_time" label="添加时间">
            </el-table-column>

            <el-table-column  align="center" prop="id" label="操作">
              <template slot-scope="scope">
                <el-link class="custom-link" @click="edit(scope.row.id)">编辑</el-link>
              </template>
            </el-table-column>

            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>

          <div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
              layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "franchiseeList",
    data: function () {
      return {

        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,-----
        loading: false, //加载动画
        userAgent: "",
        account_name: "",
        account: '',
        phone: "",
        isLoad: false,
      };
    },
    // 初始化执行
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      this.getFranchiseeList(); // 获取园区列表数据
    },
    inject: [
      'reload'
    ],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      getFranchiseeList() {
        this.loading = true; //打开loading动画
        this.isLoad = false; //是否加载
        this.$post({
          url: "Partner/Franchiser/franchiserList",
          data: {
            phone: this.phone,
            account_name: this.account_name,
            account: this.account,
            row: this.pageSize,
            page: this.pageNo,
            set_page: 1,
            page_data: 1,
            is_page:1,//是否带分页参数
          },
          success: data => {
            //console.log(data);
            this.isLoad = true;
            this.loading = false; //关闭动画
            if (data.code > 0) {
              // console.log(data.data);
              //that.$message.success(data.message);
              this.tableData = data.data.list;
              this.totalDataNumber = Number(data.data.page.total_number);
              this.pageNo = data.data.page.current_page;
            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      // 每页
      handleSizeChange(val) {
        this.pageNo = 1;
        this.pageSize = val; // 当前每页显示条数
        this.getFranchiseeList(); // 获取设备列表数据
      },
      // 分页
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getFranchiseeList(); // 获取设备列表数据
      },
      //编辑
      edit(id) {
        this.$router.push({ path: "/franchiseeEdit", query: { id: id, type: 2 } });
      },
      addFranchisee() {
        this.$router.push({ path: "/franchiseeEdit", query: { type: 1 } });
      },

      reset() {
        this.phone = "";
        this.account = "";
        this.account_name = "";
        this.pageNo = 1;
        this.getFranchiseeList()
      },
      //搜索园区
      search() {
        this.pageNo = 1;
        this.getFranchiseeList(); // 获取园区列表数据
      },

    },

    activated() {
      if (this.$route.meta.isUpdate) {
        this.tableData = [];
        this.getFranchiseeList()
        this.$route.meta.isUpdate = false;
      }
    },

    beforeRouteEnter(to, from, next) {
      let updates = ["/franchiseeEdit"]
      if (updates.includes(from.path)) {
        to.meta.isUpdate = true;
      }
      next();
    },
    beforeRouteLeave(to, from, next) {
      let updates = ["/franchiseeEdit"];
      if (!updates.includes(to.path)) {
        from.meta.keepAlive = false;
      } else {
        from.meta.keepAlive = true;
      }
      next();
    }
  };
</script>

<style scoped>
  #communityList {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }

  #communityList .tabel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .success-text {
    color: #67c23a;
  }

  .danger-text {
    color: #f56c6c;
  }
</style>